<template>
  <div class="job-detail">
    <div class="top-header">
      <div class="title-container">
        <img :src="customerLogo" @click="handleLogoClick" />
        <span class="title" @click="handleLogoClick"> {{ customerDesc }} </span>
        <mineAvatar :isMine="false" />
      </div>
    </div>
    <div class="job-detail-container">
      <searchBox
        ref="searchBox"
        marginTop="6px"
        height="26px"
        :hideHistory="true"
        @getInputData="getInputData"
      >
      </searchBox>
      <div class="main" v-loading="pageLoading">
        <el-scrollbar style="height: 100%">
          <div class="title-box">
            <div class="title-bar">
              <div class="backBtn" @click="handleBackBtnClick">
                <img :src="backArrow" alt="" />
              </div>
              <div
                :class="['title-info', !companyInfo.logoUrl ? 'center' : '']"
              >
                <div class="logo-box">
                  <img
                    :src="companyInfo.logoUrl || smallCompany"
                    class="logo-img"
                    alt=""
                  />
                </div>
                <div class="name-box">
                  <div class="job-title">
                    {{ companyInfo.name || companyName }}
                  </div>
                  <div
                    class="title-command"
                    v-if="companyInfo.comScaleName || companyInfo.tradeName"
                  >
                    <span class="command line">{{
                      getScaleName(companyInfo.comScaleName)
                    }}</span>
                    <span class="command">{{
                      getScaleName(companyInfo.tradeName)
                    }}</span>
                  </div>
                </div>
                <div class="collect-btn" @click="handleCollection">
                  {{ companyInfo.isCollect == '1' ? '已收藏' : '收藏' }}
                </div>
              </div>
              <div class="title-num">
                <div class="num-item">
                  <span class="num">{{ jobsNum }}</span>
                  <span class="title">在招岗位</span>
                </div>
                <div class="num-item">
                  <span class="num">{{ recruitPeronNum }}</span>
                  <span class="title">招聘HR</span>
                </div>
              </div>
            </div>
            <div class="title-type">
              <div class="type-item" v-for="tag in tagsList" :key="tag">
                {{ tag }}
              </div>
            </div>
          </div>
          <!-- 这个div用于占位，设计过于奇葩，没办法 -->
          <div class="useless-bg"></div>
          <div :class="['content-box', activeName == 'first' ? 'grey-bg' : '']">
            <div class="box-left">
              <div class="tab-contain">
                <el-tabs v-model="activeName">
                  <el-tab-pane label="公司简介" name="first"></el-tab-pane>
                  <el-tab-pane
                    :label="`招聘岗位（${sums}）`"
                    name="second"
                  ></el-tab-pane>
                </el-tabs>
              </div>
              <CompanyIntroduction
                ref="companyIntroduction"
                v-if="activeName == 'first'"
                :companyInfo="companyInfo"
              ></CompanyIntroduction>
              <JobsTable v-show="activeName == 'second'"></JobsTable>
            </div>
            <RightSideList
              v-show="activeName == 'first'"
              :recruitPersonList="recruitPersonList"
              :recruitLoading="recruitLoading"
              @checkMore="handleClickTab"
            ></RightSideList>
          </div>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>

<script>
import { tagsEnum } from '@/utils/jobFilterData.js';
import governmentIcon from '@/assets/home/governmentIcon.png';
import backArrow from '@/assets/images/png/backArrow.png';
import smallCompany from '@/assets/images/png/smallCompany.png';
import backBtn from '@/icons/backBtn.png';
import {
  getRecruit,
  getCompanyInfo,
  collectJob,
  getCompanyCareerJobs,
  getCompanyJobs
} from '@/api/job-detail';

export default {
  name: 'Detail',
  components: {
    searchBox: () => import('../home/components/searchBox'),
    mineAvatar: () => import('../home/components/mineAvatar'),
    CompanyIntroduction: () => import('./components/CompanyIntroduction'),
    RightSideList: () => import('./components/RightSideList'),
    JobsTable: () => import('./components/JobsTable')
  },
  data() {
    return {
      smallCompany,
      governmentIcon,
      backArrow,
      customerDesc: '就业创业职业大全云平台',
      customerLogo: '',
      backBtn,
      SecretKey: '',
      pageLoading: false,
      loading: false,
      inputData: '',
      personId: localStorage.getItem('personId') || '',
      activeName: 'second',
      companyInfo: {},
      recruitPersonList: [],
      tagsList: [],
      recruitLoading: false,
      recruitPeronNum: 0,
      jobsNum: 0,
      sums: 0,
      comId: '',
      companyId: '',
      companyName: ''
    };
  },

  created() {
    this.companyId = this.$route.query.companyId || '';
    this.comId = this.$route.query.comId || '';
    this.companyName = this.$route.query.companyName || '';

    if (localStorage.getItem('customerDesc')) {
      this.customerDesc = localStorage.getItem('customerDesc');
      document.title = this.customerDesc;
    }

    const extraJson = localStorage.getItem('extra');
    if (extraJson) {
      const extra = JSON.parse(extraJson);
      this.customerLogo = extra.icon ? extra.icon : this.governmentIcon;
    } else {
      this.customerLogo = this.governmentIcon;
    }
    this.getData();
    this.getRecruitFn();
    this.getCompanyInfoFn();
  },
  mounted() {
    window.addEventListener('click', this.listenerChangeFlag);
  },
  beforeDestroy() {
    window.removeEventListener('click', this.listenerChangeFlag);
  },
  methods: {
    getScaleName(val) {
      if (val == '未公布' || !val) {
        return '-';
      } else {
        return val;
      }
    },
    async getCompanyInfoFn() {
      const params = {
        companyId: this.$route.query.companyId,
        id: this.$route.query.comId
      };
      const res = await getCompanyInfo(params);
      if (res.code === 200) {
        this.companyInfo = res.data;
        const tags = [];
        res.data.tags.forEach((item) => {
          if (tagsEnum.includes(item)) {
            tags.push(item);
          }
        });
        this.tagsList = tags;
      }
    },
    async getRecruitFn() {
      // this.recruitLoading = true; // TODO:
      // 这两个参数不会同时都有值。
      // comId: 职业详情中的职业机会列表 => 岗位详情 => 这里
      // companyId: 校招岗位列表 => 岗位详情 => 这里
      const params = {
        companyId: this.companyId,
        id: this.comId
      };
      const res = await getRecruit(params);
      if (res.code === 200) {
        this.recruitPersonList = res.data.recruitList;
        this.recruitPeronNum = res.data.recruit;
        this.jobsNum = res.data.jobs;
      }
      this.recruitLoading = false;
    },
    getData() {
      this.loading = true;
      // 分两种情况
      // comId: 职业详情中的职业机会列表 => 岗位详情 => 这里
      // companyId: 校招岗位列表 => 岗位详情 => 这里
      const params = {
        pageNo: 1,
        pageSize: 1
      };
      if (this.comId) {
        params.id = this.comId;
      } else {
        params.companyId = this.companyId;
        params.rctypes = '';
      }
      const fn = this.comId ? getCompanyCareerJobs : getCompanyJobs;
      fn(params)
        .then((res) => {
          if (res.code == 200) {
            this.sums = res.pageparam.sums;
          } else {
            console.log(res);
          }
        })
        .catch((e) => {
          console.log(e);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleCollection() {
      const params = {
        dataId: this.companyId ? this.companyId : this.comId,
        dataType: '11',
        action: this.companyInfo.isCollect == '1' ? '0' : '1' // 1 收藏 0 取消收藏
      };
      collectJob(params).then((res) => {
        if (res.code == 200) {
          this.$set(this.companyInfo, 'isCollect', params.action);
          this.$message.success(
            params.action == '1' ? '收藏成功' : '已取消收藏'
          );
        } else {
          this.$message.error('收藏失败');
        }
      });
    },
    handleClickTab() {
      this.activeName = 'second';
    },
    listenerChangeFlag(e) {
      let nowClassName = e.target.className;
      if (nowClassName != 'search' && nowClassName != 'el-input__inner') {
        this.$refs.searchBox && this.$refs.searchBox.clickInputOutside();
      }
    },
    toJobDetail(item) {
      let routeData = this.$router.resolve({
        path: `/job-detail?companyId=${item.uid}&zp_id=${item.id}`
      });
      window.open(routeData.href, '_blank');
    },
    handleFinishResume(flag) {
      let path = flag ? '/mine?openUpload=true' : '/mine';
      let routeData = this.$router.resolve({
        path
      });
      window.open(routeData.href, '_blank');
    },
    getInputData(inputData) {
      this.inputData = inputData;
    },
    handleLogoClick() {
      this.$router.push({
        path: '/position',
        query: {
          superToken: this.$route.query.superToken || '',
          SecretKey: this.$route.query.SecretKey || '',
          customerName: this.$route.query.customerName || ''
        }
      });
    },
    handleBackBtnClick() {
      this.$router.push({
        path: '/job-detail',
        query: this.$route.query
      });
    },
    handleMine() {
      this.$router.push({
        path: '/mine',
        query: {
          id: this.$route.query.id,
          superToken: this.$route.query.superToken || '',
          SecretKey: this.$route.query.SecretKey || '',
          customerName: this.$route.query.customerName
        }
      });
    }
  }
};
</script>
<style scoped lang="scss">
::v-deep .el-scrollbar .el-scrollbar__wrap {
  overflow-x: hidden;
}
::v-deep .el-tabs__item.is-active {
  font-weight: 600;
}

.qr-code-popover ::v-deep .el-popover {
  border-radius: 8px; // 不生效
}

.spe-button {
  border-radius: 8px;
}

.qr-code-popover {
  .qr-code-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: #333333;
    .qr-code {
      width: 148px;
      height: 148px;
      margin-bottom: 14px;
    }
    .qr-code-title {
      width: 148px;
      height: 120px;
      // margin-bottom: 14px;
      align-content: center;
      text-align: center;
    }
    .qr-code-btn {
      width: 120px;
      height: 40px;
      margin-bottom: 14px;
      line-height: 40px;
      text-align: center;
      border-radius: 8px;
      background-color: #4880ff;
      color: #fff;
      font-size: 16px;
      cursor: pointer;
    }
  }
  .empty {
    margin: auto;
    height: 220px;
    ::v-deep .el-empty__image {
      width: 120px;
    }
  }
}

.benefitPopover {
  display: flex;
  top: 140px !important;
  .item-content {
    display: flex;
    flex-wrap: wrap; /* 添加这一行以允许换行 */
    justify-content: space-between;
    .treatment {
      padding: 0px 6px;
      background: #e5efff;
      border-radius: 4px;
      font-size: 15px;
      color: #0b6eff;
      margin-bottom: 6px;
      width: fit-content;
      width: auto;
      height: 26px;
      line-height: 26px;
      white-space: nowrap;
      margin: 4px;
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}
.job-detail {
  position: relative;
  background: #f7f8fa;
  min-height: 100%;
  min-width: 1190px;
  .top-header {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    width: 100%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(7px);
    background-size: 100% 57px;
    z-index: 2;
    .title-container {
      display: flex;
      align-items: center;
      padding-left: 25px;
      color: #fff;
      font-size: 17px;
      line-height: 24px;
      letter-spacing: 2px;
      .title {
        font-family: 'title-home-font';
        cursor: pointer;
        max-width: 26vw;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-inline-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
      }
      .mine {
        color: #fff;
        cursor: pointer;
        position: fixed;
        display: flex;
        align-items: center;
        font-size: 14px;
        top: 20px;
        right: 20px;
        .avatar {
          height: 24px;
          width: 24px;
          margin: 0 24px 0 8px;
          border-radius: 50%;
          overflow: hidden;
        }
      }
      img {
        width: 24px;
        height: auto;
        cursor: pointer;
        margin-right: 5px;
      }
    }
  }
  ::v-deep .search-box {
    width: auto;
  }
  .job-detail-container {
    width: 100%;
    height: 100%;
    display: flex;
    background: url('../../assets/home/back.png') no-repeat;
    flex-direction: column;
    background-size: 100.1% 100%;
    align-items: center;
    min-width: 1375px;
    .main {
      height: calc(100vh - 79px);
      position: relative;
      border-radius: 20px;
      overflow: hidden;
      margin-top: 26px;
      background-color: white;
      width: calc(100vw - 36px);
      min-width: 1375px;
      display: flex;
      flex-direction: column;
      .title-box {
        background: url('../../assets/images/png/companyTitleBg.png') no-repeat;
        background-size: 100% 100%;
        padding: 16px 24px 16px 16px;
        .title-bar {
          display: flex;
          .backBtn {
            width: 36px;
            height: 36px;
            margin-right: 30px;
            cursor: pointer;
            img {
              width: 36px;
              height: 36px;
            }
          }
          .center {
            align-items: center;
          }
          .title-info {
            display: flex;
            .logo-box {
              width: 50px;
              height: 50px;
              border-radius: 12px;
              display: flex;
              align-items: center;
              justify-content: center;
              .logo-img {
                border-radius: 12px;
                width: 50px;
                height: 50px;
              }
            }
            .name-box {
              margin-left: 20px;
              .job-title {
                font-size: 22px;
                color: #fff;
                font-weight: 600;
                letter-spacing: 0.1rem;
              }
              .title-command {
                display: flex;
                align-items: center;
                margin-top: 12px;
                .command {
                  font-family: PingFangSC, PingFang SC;
                  font-size: 16px;
                  color: #c9d0dd;
                  padding: 0 13px;
                  &:first-child {
                    padding-left: 0;
                  }
                }
                .line {
                  position: relative;
                  &:after {
                    content: '';
                    position: absolute;
                    top: 50%;
                    right: 0;
                    width: 1px;
                    height: 11px;
                    background: #cccfd7;
                    transform: translateY(-50%);
                  }
                }
              }
            }
            .collect-btn {
              margin-left: 36px;
              height: 36px;
              line-height: 36px;
              padding: 0 32px;
              font-weight: bold;
              font-size: 16px;
              color: #ffffff;
              border-radius: 8px;
              background: #3f547c;
              cursor: pointer;
            }
          }
          .title-num {
            margin-left: auto;
            margin-right: 24px;
            display: flex;
            .num-item {
              color: #fff;
              margin-left: 36px;
              .num {
                font-family: D-DIN-PRO-800-ExtraBold;
                font-size: 36px;
                margin-right: 6px;
              }
            }
          }
        }
        .title-type {
          display: flex;
          margin: 23px 0 0 65px;
          .type-item {
            height: 28px;
            line-height: 28px;
            padding: 0 16px;
            font-size: 15px;
            color: #c9d0dd;
            background: #021f52;
            border-radius: 4px;
            margin-right: 10px;
          }
        }
      }
      .useless-bg {
        height: 12px;
        background-color: #f1f4f9;
      }
      .grey-bg {
        background-color: #f1f4f9;
      }
      .content-box {
        display: flex;
        padding: 0 0 18px 0;
        .box-left {
          flex: 1;
          border-radius: 0px 8px 8px 0px;
          background: url('../../assets/images/png/companyContentBg.png')
            no-repeat;
          background-size: 100% 78px;
          .tab-contain {
            margin-left: 24px;
            padding-top: 8px;
            ::v-deep .el-tabs__item {
              font-size: 16px;
              padding-right: 40px;
            }
            ::v-deep .el-tabs__nav-wrap::after {
              height: 0;
            }
          }
        }
      }
    }
  }
}
</style>
